.buju {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.buju .bujuTitle {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.buju .bujuMain {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}
.buju .bujuMain .bujuAc{
    background-color: #1f8efa;
    
}
.bujuMain .bujuItem1,
.bujuMain .bujuItem2,
.bujuMain .bujuItem3,
.bujuMain .bujuItem4,
.bujuMain .bujuItem5,
.bujuMain .bujuItem6,
.bujuMain .bujuItem7,
.bujuMain .bujuItem8 {
  width: 23%;
  height: 40%;
  background-color: #3e4e6c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}

.bujuItem1 .itemleft {
  width: 27.5%;
  height: 100%;
  background-color: #70889e;
  border-radius: 5px;
}
.bujuItem1 .itemright {
  width: 67.5%;
  height: 100%;
  background-color: #70889e;
  border-radius: 5px;
}
.bujuItem2 .itemleft {
  width: 22.5%;
  height: 100%;
  background-color: #70889e;
  border-radius: 5px;
}
.bujuItem2 .itemright {
  width: 72.5%;
  height: 100%;
}
.bujuItem2 .itemright {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bujuItem2 .itemright div:first-child {
  width: 100%;
  height: 72.5%;
  background-color: #70889e;
  border-radius: 5px;
}
.bujuItem2 .itemright div:last-child {
  width: 100%;
  height: 20%;
  background-color: #70889e;
  border-radius: 5px;
}
.bujuItem3 div:nth-child(1),
.bujuItem3 div:nth-child(3) {
  width: 19.5%;
  height: 100%;
  background-color: #70889e;
   border-radius: 5px;
}
.bujuItem3 div:nth-child(2) {
  width: 52.5%;
  height: 100%;
  background-color: #70889e;
   border-radius: 5px;
}

.bujuItem4 {
    flex-direction: column;
}
.bujuItem4 div:first-child{
    width: 100%;
    height: 72.5%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem4 div:last-child{
    width: 100%;
    height: 20%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem5 .itemleft{
    width: 77.5%;
    height: 100%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem5 .itemright{
    width: 17.5%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}
.bujuItem5 .itemright div{
    width: 100%;
    height: 46%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem6{
    flex-direction: column;
}
.bujuItem6 .itemtop{
    width: 100%;
    height: 65.5%;
    display: flex;
    justify-content: space-between;
}
.bujuItem6 .itemtop div{
    width: 47.5%;
    height: 100%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem6 .itembottom{
    width: 100%;
    height: 27.5%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem7 .itemleft{
    width: 20%;
    height: 100%;
    background-color: #70889e;
    border-radius: 5px;
}
.bujuItem7 .itemright{
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.bujuItem7 .itemright div:first-child{
    width: 100%;
    height: 27.5px;
    background-color: #70889e;
    border-radius: 5px;

}
.bujuItem7 .itemright div:last-child{
    width: 100%;
    height: 65.5%;
    background-color: #70889e;
    border-radius: 5px;

}
.bujuItem8{
    flex-wrap: wrap;
}
.bujuItem8 div{
    width: 47.5%;
    height: 42.5%;
    background-color: #70889e;
    border-radius: 5px;
}

